<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="keywords" content="">
    <meta name="description" content="mezz">
    <meta name="author" content="mezz">
    <link rel="shortcut icon" href="images/icon.png">
    <link rel="stylesheet" href="css/ui.css">
    <script src="js/jquery.js"></script>
    <script src="js/ui.js"></script>
    <title></title>
</head>
<body class="mallview">
<header>
    <div class="goback" onclick="history.go(-1)"></div>
    <div class="title">购物车</div>
    <div class="right"></div>
</header>
<div class="mainbox">
    <input type="checkbox" id="item1" name="item">
    <label class="choose gdrow" for="item1">
        <span class="gdpic"></span>
        <span class="text">
            <p class="name">商品名称</p>
            <p>购买数量：<span class="number">1</span></p>
            <p>购买价格：<span class="price">1000</span></p>
        </span>
    </label>
    <label class="choose gdrow" for="item1">
        <span class="gdpic"></span>
        <span class="text">
            <p class="name">商品名称</p>
            <p>购买数量：<span class="number">1</span></p>
            <p>购买价格：<span class="price">1000</span></p>
        </span>
    </label>

</div>
<footer>
    <div class="chooseall">
        全选
    </div>
    <div class="totalprice">
        合计： <font>
        ¥<span class="tp">00</span>
        </font>

    </div>
    <button disabled class="cb" onclick="location.href='payment.html'">结算</button>
</footer>
</body>
<script>
    $(function(){
        $('.gdrow').click(function(){
            if($(this).hasClass('active')){
                $('.cb').removeAttr('disabled');
                if(checkchoose()>0) {
                    $('.chooseall').addClass('active');
                    $('.cb').removeAttr('disabled');
                }
            }else{
                $('.chooseall').removeClass('active');
                if(checkchoose()==0) {
                    $('.cb').attr('disabled','disabled');
                }

            }
            $('.tp').html(getcp());
        });
        $('.chooseall').click(function(){
            if ($(this).hasClass('active')) {
                $('.gdrow').addClass('active');

                $('.tp').html(getcp());
                $('.cb').removeAttr('disabled');
            } else {
                $('.gdrow').removeClass('active');
                $('.tp').html('00');
                $('.cb').attr('disabled','disabled');
            }
        });
        getcp = function(){
            var tprice = 0;
            for(let i=0;i<$('.gdrow').length;i++){
                if($( $('.gdrow').eq(i).hasClass('active'))){
                    var num = $('.gdrow').eq(i).find('.number').html();
                    var price = $('.gdrow').eq(i).find('.price').html();
                    tprice = -(-tprice - num*price);
                }
            }
            return tprice;
        };
        checkchoose = function(){
            var checker = 0;
            for(let i=0;i<$('.gdrow').length;i++){
                if($('.gdrow').eq(i).hasClass('active')){
                    checker++;
                }
            }
            return checker;
        }
    })
</script>
</html>